<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="/lib/jquery/jquery-1.12.4.min.js"></script>
    <script src="/lib/echarts/echarts.min.js"></script>
</head>
<body>
<h1>sigar动态加载测试项目</h1>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;float: left"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 初始化数据
    var combined = 0;
    var option = {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: 'cpu使用指标',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: combined, name: 'CPU使用率'}]
            }
        ]
    };
    //初始化
    myChart.setOption(option, true);
    // 定时器
    setInterval(function () {
            $.ajax({
                type: "POST",
                url: "/sigar/getCpuPerc",
                async: false,
                success: function (data) {
                    console.log(data[0]);
                    // 赋值
                    combined = data[0].combined;
                }
            });
            console.log("cpu使用率" + combined);
            option.series[0].data[0].value = (combined * 100).toFixed(2) - 0;
            myChart.setOption(option, true);
        },
        5000
    );

</script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1" style="width: 600px;height:400px;float: left"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    // 初始化数据
    var combined1 = 0;
    var option1 = {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '内存使用指标',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 0, name: '内存使用率'}]
            }
        ]
    };
    //初始化
    myChart1.setOption(option1, true);
    // 定时器
    setInterval(function () {
            $.ajax({
                type: "POST",
                url: "/sigar/getMememory",
                async: false,
                success: function (data) {
                    console.log(data);
                    combined1 = data.usedPercent;
                }
            });
            console.log("内存使用率：" + combined1);
            option1.series[0].data[0].value = (combined1).toFixed(2) - 0;
            myChart1.setOption(option1, true);
        },
        5000
    );

</script>

<div style="float: left">
    <p th:each="cpuInfo,iterStat:${cpuInfoList}" th:text="'第一块COU信息'+${iterStat.index}"></p>
</div>

</body>
</html>